<template>
	<view class="not-join df-yc">
		<!-- 节点列表 -->
		<view class="node_items df-xe">
			<view :class="{item:true,fb:true,fs26:true,'df-yc':true,jc:true,'active-bg':currNodeIndex==index}"
				v-for="(item,index) in group" :key="index" @click="nodeChange(index)">
				<view :class="{num:currNodeIndex!=index,mb30:true,fs26:true,fb:true,'active-num':currNodeIndex==index}">
					{{item.goal}}节点
				</view>
				<view class="icon">
					<image style="width: 63rpx;" :src="currNodeIndex==index?temImgUrl+nodeIconActive:temImgUrl+nodeIcon"
						mode="widthFix">
					</image>
				</view>
			</view>
		</view>
		<!-- 报名按钮 -->
		<view class="button fs32 df-c fb" @click="applyHandle">报名参加</view>
		<!-- 成事战队每日竞速赛介绍 -->
		<view class="about-race bs">
			<view class="title fs32 bg-cover df-c">
				成事战队每日竞速赛
			</view>
			<view v-html="rules" class="content fs26 df-yc"></view>
		</view>
		<!-- 底部口号 -->
		<view class="bottom fs24">
			- 愿每一杯好茶，都相伴成事 -
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';

	export default {
		props: {
			status: Number
		},
		components: {

		},
		data: function() {
			return {
				nodeIcon: '/wjxwhite.png',
				nodeIconActive: '/wjxblack.png',
				currNodeIndex: 0,
				group: [],
				rules: "",
				nodeStatus: 0,
				gameStatus: 416,
				temImgUrl: this.$IMG_URL_TEMP
			}
		},
		computed: {

		},
		methods: {
			...mapActions(['getDayGameStatus']),
			nodeChange(index) {
				this.currNodeIndex = index
				this.nodeStatus = this.group[this.currNodeIndex].status
			},
			//未参加
			getNotJoin() {
				const that = this
				this.$api('dayGame.gameIndex').then(res => {
					this.group = res.data.group
					this.nodeStatus = res.data.group[0].status
					this.rules = res.data.rule
					this.$store.commit("JOIN_DAY_GAME", Boolean(res.data.game.status))
					uni.setStorageSync('gameStatus', Boolean(res.data.game.status))
					this.$emit('totalValue', res.data.game.user_contribution)
				})
			},
			// 报名
			applyHandle() {
				switch (this.nodeStatus) {
					case 1:
						this.$tools.toast("已加入比赛，等待比赛开启")
						break;
					case 3:
						this.$tools.toast("已加入比赛，比赛进行中")
						break;
					case 5:
						this.$tools.toast("该组比赛已经结束")
						break;
					case 0:
						// this.$tools.toast("未加入比赛")
						this.apply()
						break;
				}
			},
			apply() {
				uni.showLoading({
					title:"报名中...",
					mask:true
				})
				this.$api('dayGame.joinGame', {
					type: this.currNodeIndex
				}).then(res => {
					if (res.code === 1) {
						uni.hideLoading()
						this.$tools.toast("报名成功")
						this.$store.commit("JOIN_DAY_GAME", true)
						this.getDayGameStatus()
					}
				}).catch(err => {
					console.log("========err")
					console.log(err)
					this.$tools.toast(err.data.msg)
				})
			}

		},
		created() {
			//this.getDayGameStatus()
			if (!this.status) {
				this.getNotJoin()
			}

		},
		mounted() {},
	}
</script>

<style scoped lang="scss">
	.not-join {
		width: 100%;
		background-color: #622128;

	}

	.nav-bg {
		position: relative;
		width: 750rpx;
		height: 698rpx;
		background-image: url(#{$IMG_URL}/jsbg.jpg);

		.nav-text {
			margin-top: auto;

			.text1 {
				font-size: 46rpx;
				font-family: Source Han Serif CN;
				color: #581E24;
				line-height: 35px;
				text-shadow: 0px 2rpx 2rpx rgba(94, 10, 18, 0.24);

				background: linear-gradient(1deg, #FFDEC3 10%, #fff1e9 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.text2 {
				width: 625rpx;
				height: 72rpx;
				background-image: url(../../../../static/imgs/images/jswzbg.png);
				font-weight: 400;
				color: #E3AB6E;
			}
		}

	}

	.node_items {
		margin-top: -100rpx;

		.item {
			font-family: Source Han Serif CN;
			width: 157rpx;
			height: 209rpx;
			border-radius: 20rpx;
			background: rgba($color: #FFFFFF, $alpha:0.05);

			.num {
				color: #E3AB6E;
				text-shadow: 0px 2rpx 2rpx rgba(94, 10, 18, 0.24);

				background: linear-gradient(1deg, #FFDEC3 10%, #FFF1E9 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.active-num {
				color: #90363F;
			}
		}

		.active-bg {
			color: #90363F !important;
			background: linear-gradient(1deg, #FFDEC3 5%, #FFF1E9 100%) !important;
		}

		width: 100%;

	}

	.button {
		margin-top: 40rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(270deg, #E8B58E, #F7D9AA);
		box-shadow: 0px 3rpx 1rpx 0rpx #580F17;
		border-radius: 50rpx;
		color: #622128;
	}

	.about-race {
		padding: 126rpx 50rpx 50rpx 50rpx;
		width: 690rpx;
		background: #53181E;
		border: 1rpx solid rgba($color: #E3AB6E, $alpha: 0.5);
		border-radius: 20rpx;
		margin-top: 96rpx;
		position: relative;

		.title {
			position: absolute;
			left: 50%;
			top: -20rpx;
			transform: translateX(-50%);
			width: 488rpx;
			height: 86rpx;
			background-image: url(#{$IMG_URL}/jsbtbg.png);
			border-radius: 10rpx;
			font-family: Source Han Serif CN;
			color: #E3AB6E;
		}

		.content {
			color: #EEDCC9;
			line-height: 44rpx;
			text-align: justify;
		}
	}

	.bottom {
		font-family: Source Han Serif CN;
		color: #E3AB6E;
		margin: 60rpx 0;
	}
</style>
